.appOrderDetail {
  height: calc(100vh - 50px);
  overflow-y: scroll;
  overflow-x: hidden;

  .orderDetailPay {
    width: 100vw;
    height: 120px;
    margin-top: 5px;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    .payTop {
      flex: 1;
      display: flex;
      padding-left: 10px;
      padding-right: 10px;
      justify-content: space-between;
      align-items: center;
      .payTopLeft {
        span {
          padding-right: 5px;
        }
      }

      .payTopRight {
        color: #969799;
        font-size: 14px;
      }
    }

    .payMiddle {
      flex: 1;
      display: flex;
      padding-left: 10px;
      padding-right: 10px;
      justify-content: space-between;
      align-items: center;
      font-size: 16px;
    }

    .payBottom {
      flex: 1;
      display: flex;
      padding-left: 10px;
      padding-right: 10px;
      align-items: center;
      .payBottomContact {
        height: 32px;
        width: 66px;
        border: 1px solid #ddd;
        color: #000;
        background-color: #fff;
        font-size: 14px;
        line-height: 32px;
        text-align: center;
        position: absolute;
        right: 86px;
      }
      .payBottomQuickPay {
        height: 32px;
        width: 66px;
        color: #fff;
        background-color: red;
        font-size: 14px;
        line-height: 32px;
        text-align: center;
        position: absolute;
        right: 10px;
      }
    }
  }

  .orderDetailMessage {
    width: 100vw;
    height: 185px;
    margin-top: 5px;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    .messageTop {
      flex: 1;
      display: flex;
      padding-left: 10px;
      padding-right: 10px;
      align-items: center;
      font-size: 14px;
    }

    .messageMiddle {
      flex: 2;
      display: flex;
      padding-left: 10px;
      padding-right: 10px;
      .messageMiddleLeft {
        flex: 1;
        width: 88px !important;
        height: 88px !important;
        img {
          width: 88px !important;
          height: 88px !important;
        }
      }

      .messageMiddleRight {
        flex: 3;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .messageMiddleRightIntroduce {
          display: flex;
          flex-direction: column;
          .messageMiddleRightIntroduceName {
            text-align: left;
            padding-left: 5px;
            font-size: 12px;
          }

          .messageMiddleRightIntroduceDescript {
            text-align: left;
            padding-left: 5px;
            color: #646566;
            font-size: 12px;
            padding-top: 5px;
            //超出行则省略
            display: -webkit-box;
            overflow: hidden;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
          }
        }

        .messageMiddleRightNumber {
          display: flex;
          justify-content: space-between;
          align-content: center;

          .messageMiddleRightNumberPrice {
            font-size: 12px;
            text-align: left;
            span {
              font-size: 16px;
            }
          }

          .messageMiddleRightNumberStock {
            font-size: 12px;
            color: #969799;
            text-align: right;
          }
        }
      }
    }

    .messageBottom {
      flex: 1;
      text-align: right;
      padding-left: 10px;
      padding-right: 10px;
      font-size: 16px;
    }
  }

  .orderDetailOther {
    width: 100vw;
    height: 186px;
    margin-top: 5px;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    .otherOne {
      flex: 1.2;
      display: flex;
      padding-left: 10px;
      padding-right: 10px;
      border-bottom: 1px solid #ebedf0 ;
      align-items:center;
    }

    .otherTwo {
      flex: 1;
      display: flex;
      padding-left: 10px;
      padding-right: 10px;
      justify-content: space-between;
      border-bottom: 1px solid #ebedf0 ;
      align-items:center;

      .otherTwoRight{
        color: #969799;
      }
    }

    .otherThree {
      flex: 1;
      display: flex;
      padding-left: 10px;
      padding-right: 10px;
      border-bottom: 1px solid #ebedf0 ;
      align-items:center;

    }

    .otherFour {
      flex: 1;
      display: flex;
      padding-left: 10px;
      padding-right: 10px;
      justify-content: space-between;
      align-items:center;

      .otherFourRight{
        color: #969799;
      }
    }
  }
}
